<template>
    <div style="margin-bottom:56px">
        <v-toolbar dark color="primary" style="box-shadow:none">
            <v-icon @click="$router.back(-1)">keyboard_arrow_left</v-icon>
            <v-toolbar-title style="margin:0">菜品交换</v-toolbar-title>
            <v-icon style="position:absolute;right:0;margin-right:16px" @click="$router.push('/message')">mail_outline</v-icon>
        </v-toolbar>

        <v-layout row wrap style="background:#4caf50">
            <v-flex xs12>
                <v-layout class="search" justify-center align-center>
                    <v-flex xs1><v-icon>search</v-icon></v-flex>
                    <v-flex xs10>
                        <input style="heigh:25px;font-size:18px" placeholder="搜索菜品" single-line outline v-model="name">
                    </v-flex>
                    <v-flex xs1 @click="filter=true">
                        <img style="height:24px;width:24px" src="../../assets/screen.png">
                    </v-flex>
                    <v-navigation-drawer v-model="filter" fixed temporary right value="filter">
                        <v-toolbar flat>
                            <v-list>
                                <v-list-tile>
                                    <v-list-tile-title class="title">筛选</v-list-tile-title>
                                </v-list-tile>
                            </v-list>
                        </v-toolbar>
                        <v-divider></v-divider>
                        <v-layout row wrap v-for="(choice,index) in choices" :key=index>
                            <v-flex xs12 style="margin:5px 0 10px 20px"><span style="font-size:15px">{{choice.title}}</span></v-flex>
                            <v-flex xs4 v-for="(value,i) in choice.content" :key=i style="padding:0 10px 20px 10px;">
                                <div @click="getChoice(choice,value)" class="choice" :ref=value>{{value}}</div>
                            </v-flex>
                            <v-flex xs12><v-divider></v-divider></v-flex>
                        </v-layout>
                        <v-layout row wrap>
                            <v-flex xs12 style="margin:5px 0 0 20px"><span style="font-size:15px">价格</span></v-flex>
                            <v-layout row wrap justify-center align-center text-xs-center>
                            <v-flex xs4 style="padding:10px 10px 10px 10px;">
                                <input placeholder="最低价" class="price_input" v-model="minPrice" type="number">
                            </v-flex>
                            <v-flex xs2><span>&ndash;</span></v-flex>
                            <v-flex xs4 style="padding:10px 10px 10px 10px;">
                                <input placeholder="最高价" class="price_input" v-model="maxPrice" type="number">
                            </v-flex>
                            </v-layout>
                            <v-flex xs12><v-divider></v-divider></v-flex>
                        </v-layout>
                        <v-layout row wrap text-xs-center style="margin-top:20px">
                            <v-flex><v-btn color="primary" style="border-radius:20px" @click="reset">重置</v-btn></v-flex>
                            <v-flex><v-btn color="primary" style="border-radius:20px" @click="confirm">确定</v-btn></v-flex>
                        </v-layout>
                    </v-navigation-drawer>
                </v-layout>
            </v-flex>
        </v-layout>

        <v-layout row>
            <v-flex xs12 sm6 offset-sm3>
            <v-card>
                <v-list two-line>
                <div v-for="(item, index) in items" @click="goDetail(item.dishesId)" :key="index">
                    <v-list-tile avatar ripple>
                        <v-list-tile-avatar>
                        <img src="http://ppt.downhot.com/d/file/p/2014/08/05/cb5322240543dabe9401fd166a1a6cfc.png" :key="index"
                        style="border-radius: 0%;height: 40px;width: 56px;">
                        </v-list-tile-avatar>
                    <v-list-tile-content>
                        <v-list-tile-sub-title class="text--primary">{{ item.dishName }}</v-list-tile-sub-title>
                        <v-list-tile-sub-title>{{ item.dishMake }}</v-list-tile-sub-title>
                    </v-list-tile-content>
                    <v-list-tile-action>
                        <v-list-tile-action-text>{{item.price}}</v-list-tile-action-text>
                    </v-list-tile-action>
                    </v-list-tile>
                    <v-divider v-if="index + 1 < dishes.length" :key="`divider-${index}`"></v-divider>
                </div>
                </v-list>
            </v-card>
            </v-flex>
        </v-layout>
        <v-card>
            <v-card-text style="position:fixed;bottom:32px;z-index:1;padding:0">
                <v-btn absolute dark fab top left color="green" style="left:43%" @click="$router.push('/dishes/release-dish')">
                <v-icon>add</v-icon>
                </v-btn>
            </v-card-text>
        </v-card>
    </div>
</template>

<script>
export default {
    data(){
        return{
            dishes: [
                { dishId:1, attachmentUrl: '', dishName: '番茄蛋汤',  dishMake: "番茄炒蛋，咸了加水，淡了加盐，就可以变成番茄蛋汤" ,price:'200元',type:'家常菜'},
                { dishId:2, attachmentUrl: '', dishName: '番茄蛋汤',  dishMake: "番茄炒蛋，咸了加水，淡了加盐，就可以变成番茄蛋汤" ,price:'200元',type:'家常菜'},
                { dishId:3, attachmentUrl: '', dishName: '番茄蛋汤',  dishMake: "番茄炒蛋，咸了加水，淡了加盐，就可以变成番茄蛋汤" ,price:'200元',type:'家常菜'},
                { dishId:4, attachmentUrl: '', dishName: '番茄蛋汤',  dishMake: "番茄炒蛋，咸了加水，淡了加盐，就可以变成番茄蛋汤" ,price:'200元',type:'家常菜'},
                { dishId:5, attachmentUrl: '', dishName: '番茄蛋汤',  dishMake: "番茄炒蛋，咸了加水，淡了加盐，就可以变成番茄蛋汤" ,price:'200元',type:'家常菜'},
                { dishId:6, attachmentUrl: '', dishName: '番茄蛋汤',  dishMake: "番茄炒蛋，咸了加水，淡了加盐，就可以变成番茄蛋汤" ,price:'200元',type:'家常菜'},
                { dishId:7, attachmentUrl: '', dishName: '番茄蛋汤',  dishMake: "番茄炒蛋，咸了加水，淡了加盐，就可以变成番茄蛋汤" ,price:'200元',type:'家常菜'},
                { dishId:8, attachmentUrl: '', dishName: '番茄蛋汤',  dishMake: "番茄炒蛋，咸了加水，淡了加盐，就可以变成番茄蛋汤" ,price:'200元',type:'家常菜'},
            ],
            page:0,
            name:'',
            items:[],
            itemName:['dishesId','attachmentUrl','dishesName','dishesMake','price','type'],
            filter:false,
            hasFilter:false,
            choices:[
                {title:'种类',content:['家常菜','烘焙','煲汤','饮品','小吃','其它'],result:''},
                {title:'口味',content:['酸','甜','苦','辣','咸','香'],result:''},
                {title:'适宜人群',content:['老人','小孩','孕妇','病人','男性','女性'],result:''},
            ],
            minPrice:'',
            maxPrice:'',
            item:false,
        }
    },
    methods:{
        goDetail(id){
            this.$router.push('/dishes/'+id+'/dish-detail')
        },
        addItem(){
            var scrollTop=document.documentElement.scrollTop || window.pageYOffset ||document.body.scrollTop
            // var dishes=this.getDishes()
            if(this.hasFilter){
                this.items=[]
                this.hasFilter=false
                this.page=0
            }
            if(scrollTop+window.innerHeight>=document.body.offsetHeight){
                for(var dish in this.dishes){//delete this
                    this.items.push(this.dishes[dish])//delete this
                }
            }
        },
        getChoice(choice,value){
            if(choice.result==value){
                this.$refs[choice.result][0].style.color='#000000'
                choice.result=''
            }else{
                if(choice.result!=''){
                    this.$refs[choice.result][0].style.color='#000000'
                }
                choice.result=value;
                var item=this.$refs[value][0]
                item.style.color='#4caf50'
            }
            
        },
        reset(){
            for(var i in this.choices){
                var choice=this.choices[i]
                if(choice.result!='')this.$refs[choice.result][0].style.color='#000000'
                choice.result=''
            }
        },
        confirm(){
            this.filter=false
            this.hasFilter=true
            // this.addItem()
        },
        getDishes(){
            var dishes=[]
            this.$axios({
                method:'get',
                url:'/api/dishes/find',
                params:{
                    pageNum:this.page,
                    pageSize:10,
                    name:this.name,
                    type:this.choices[0].result,
                    taste:this.choices[1].result,
                    for:this.choices[2].result,
                    maxPrice:this.minPrice,
                    minPrice:this.maxPrice,
                },
                headers:{
                    'Content-Type':'multipart/form-data',
                    'Authorization':'bearer'+localStorage.getItem('Access-Token')
                }
            }).then(
                function(response){
                    var res=response.parseJSON()
                    var rows=res['rows']
                    for(var i in rows){
                        var dish=this.getDish(rows[i])
                        dishes.push(dish)
                    }
                }
            ).catch({
                function(response){
                    console.log(response)
                }
            })
            this.page++
            return dishes
        },
        getDish(row){
            var dish={}
            for(var i in this.itemName){
                if(this.itemName[i]=='attachmentUrl'){
                    dish[this.itemName[i]]=row[this.itemName[i]][0]
                }
                dish[this.itemName[i]]=row[this.itemName[i]]
            }
            return dish
        }

    },
    mounted(){
        this.addItem()
        window.addEventListener('scroll', this.addItem)
    },
    destroyed(){
        window.removeEventListener('scroll',this.addItem)
    }
}
</script>

<style scoped>
.flex.xs4{
    text-align: center
}

.search{
    height:50px;
    background:white;
    border-radius: 25px;
    margin:0 16px 16px 16px;
    padding: 0 10px 0 10px;
}

input:focus{
    outline: none
}

.price_input{
    border:1px solid #eeeeee;
    border-radius:10px;
    width:100%;
    height:30px;
    padding-left:10px;
}

.choice{
    height:30px;
    background:#eeeeee;
    border-radius:5px;
    line-height:30px
}

.choice:visited{
    background:#ff0000;
}
</style>
